<template>
  <div class="course">
    <!-- 顶部 logo，使用require引入静态图片资源 -->
    <van-image
      width="180"
      :src="require('@/assets/logo.png')"
    />
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <!-- 使用 v-for 遍历计算属性 -->
      <van-swipe-item v-for="item in swipeListDate" :key="item.id">
        <img :src="item.img" :alt="item.name">
      </van-swipe-item>
    </van-swipe>
    <!-- 创建课程列表组件实例，使用参数传递的方法将要使用的接口传递给子组件 -->
    <courseList :getData="getData" />
    <!-- 创建标签栏子组件实例 -->
    <footBar/>
  </div>
</template>

<script>
// 引入接口：获取广告位及对应广告 , 分页查询课程
import { getAllAds, getQueryCourses } from '@/api/course'
// 引入标签栏子组件
import footBar from '@/common/foot-bar'
// 引入课程列表组件
import courseList from '@/common/course-list'
export default {
  name: 'Course',
  data () {
    return {
      // 广告列表
      swipeList: []
    }
  },
  // 注册组件
  components: {
    footBar,
    courseList
  },
  // 钩子函数
  created () {
    // 获取广告列表
    this.getAds()
    // 设置传递给子组件的接口
    this.getData = getQueryCourses
  },
  methods: {
    // 获取轮播广告列表
    async getAds () {
      // 调用接口
      const { data } = await getAllAds(999)
      // 将获取到的数据传给data
      this.swipeList = data.content[0].adDTOList
    }
  },
  // 计算属性
  computed: {
    // 过滤真正需要展示的轮播广告
    swipeListDate () {
      return this.swipeList.filter(item => item.status === 1)
    }
  }
}
</script>

<style lang="scss" scoped>
// 顶部logo
.van-image {
  margin-left: -20px;
}
// 轮播图图片
.van-swipe .van-swipe-item img {
  width: 100%;
  height: 200px;
}
// 课程列表顶部和底部定位
.van-pull-refresh {
  top: 260px;
  bottom: 50px;
}
</style>
